import React from "react"
import {Link,useSelector,useIntl, setLocale, getLocale} from "umi"
import { Layout, Menu , Dropdown, Avatar, Image ,Button } from 'antd';
import styles from "./_layout.less"
import { IMenu } from '@/utils/interface';
const Mainlayout:React.FC=(props)=> {
    const { SubMenu } = Menu;
    const Intl = useIntl()
    const { Header, Content, Sider } = Layout;
    const { userMenu }: { userMenu: IMenu[] } = useSelector(module => (module as { user: { userMenu: IMenu[] } }).user)
    const menu = (
        <Menu>
          <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
              个人中心
            </a>
          </Menu.Item>
          <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
             我的班级
            </a>
          </Menu.Item>
          <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
              设置
            </a>
          </Menu.Item>
          <Menu.Item danger>退出登录</Menu.Item>
        </Menu>
      );
      let defaultSelectedKey = userMenu.length ? userMenu[0].children![0].name : '';
      function changeLocale() {
        let locale = getLocale();
        if (locale === 'zh-CN') {
          setLocale('en-US', false);
        } else {
          setLocale('zh-CN', false);
        }
      }
    return (
        <Layout>
          <Button onClick={changeLocale} className={styles.buttons}>{getLocale() === 'zh-CN' ? '英文' : '中文'}</Button>
        <Header className="header">
            <img className={styles.logo} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551624718911&di=4a7004f8d71bd8da84d4eadf1b59e689&imgtype=0&src=http%3A%2F%2Fimg105.job1001.com%2Fupload%2Falbum%2F2014-10-15%2F1413365052_95IE3msH.jpg" alt="" />
            {/* <img className="logo" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551624718911&di=4a7004f8d71bd8da84d4eadf1b59e689&imgtype=0&src=http%3A%2F%2Fimg105.job1001.com%2Fupload%2Falbum%2F2014-10-15%2F1413365052_95IE3msH.jpg" alt=""/> */}
            <Dropdown overlay={menu}>
              <div>
                <Avatar
                  src={<Image src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                />
                <span>zhangrongrong</span>
              </div>
            </Dropdown>
      </Header>
        <Layout>
          <Sider width={200} className="site-layout-background">
            <Menu
              mode="inline"
              theme='dark'
              defaultSelectedKeys={['sub1'+defaultSelectedKey]}
              defaultOpenKeys={['sub0']}
              style={{ height: '100%', borderRight: 0 }}
            >
              {
                userMenu.map((item,index) => {
                  return <SubMenu key={'sub'+index} icon={<item.meta.icon />} title={Intl.formatMessage({ id: item.name })}>{
                    item.children?.map(value => {
                      return value.meta.show ? <Menu.Item key={'sub'+value.name}>
                        <Link to={value.path}>{Intl.formatMessage({ id: value.name })}</Link>
                      </Menu.Item> : null
                    })
                  }</SubMenu>
                })
              }
            </Menu>
          </Sider>
          <Layout style={{ padding: '0 24px 24px' }}>
            {/* <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>Home</Breadcrumb.Item>
              <Breadcrumb.Item>List</Breadcrumb.Item>
              <Breadcrumb.Item>App</Breadcrumb.Item>
            </Breadcrumb> */}
            <Content
              className="site-layout-background"
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
                background:"#fff"
              }}
            >
            {props.children}</Content>
          </Layout>
        </Layout>
      </Layout>
    )
  }
  export default Mainlayout
  